<template>
  <div class="content-info">
    <LabelTitle text="隐患排查整改分析" :showImg="false"></LabelTitle>
    <div class="content-box mt10">
      <barEcharts titleName="数据总量（条）" :options="pieData"></barEcharts>
    </div>
  </div>
</template>

<script setup>
import LabelTitle from "@/components/labeltitle.vue";
import { onMounted } from "vue";
import barEcharts from "./bar.vue";
const props = defineProps({
  optionData: Object,
});
let pieData = ref([]);

const getData = async () => {
  try {
    let data = [];
    // props.optionData.forEach((item) => {
    //   data.push({
    //     xaxis: item.inspectionMon,
    //     num: item.count,
    //   });
    // });

    let newVal = {
      xAxis: [],
      yh: [],
      zg: [],
      pc: [],
    };

    props.optionData.map((item) => {
      newVal.xAxis.push(item.inspectionMon);
      newVal.yh.push(item.inspectionTimes);
      newVal.zg.push(item.issueCount);
      newVal.pc.push(item.rectificationCount);
    });
    pieData.value = newVal;
  } catch (e) {
    console.log("error:", e);
  }
};

watch(
  () => props.optionData,
  (newval) => {
    getData();
  },
  {
    deep: true,
    // immediate: true,
  }
);
onMounted(() => {
  // getData();
});
</script>

<style lang="scss" scoped>
.content-info {
  width: 33%;
  // height: 250px;
  .content-box {
    height: 250px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
    border-radius: 12px;
    // padding: 26px 47px 28px 0;
    padding: 20px;
  }
}
</style>
